<template>
	<view class="team">
		<uni-nav-bar fixed="true" statusBar="true" border="none" left-icon="left" title="我的团队" 
			@clickLeft="back()"  background-color="#FE903D" color="#ffffff"></uni-nav-bar>
		<view class="header">
			<view class="black_1">
				<image class="left" :src="info.stat.avatar"></image>
				<view class="middle">
					<view class="line_1">{{info.stat.nickname}}</view>
					<view class="line_2">
						{{info.stat.team_count_achievement}}
					</view>
					<view class="line_3">
						团队总业绩
					</view>
				</view>
				<view class="right">
					<image class="img" :src="'/static/my/'+(info.stat.level+1)+'.png'"></image>
					<view class="text1">{{(info.stat.level)==0?'普通会员':'团队等级:V'+(info.stat.level)}}</view>
				</view>
			</view>
		</view>

		<view class="black_2">
			<view class="line_1">业绩数据</view>
			<view class="line_2">
				<view class="left">
					<view class="text1">{{info.stat.self_achievement}}</view>
					<view class="text2">个人业绩</view>
				</view>
				<view class="left">
					<view class="text1">{{info.stat.invite_achievement}}</view>
					<view class="text2">直推业绩</view>
				</view>
				<view class="left">
					<view class="text1">{{info.stat.invite_count}}</view>
					<view class="text2">直推人数</view>
				</view>
			</view>
			<!-- <view class="line"></view> -->
			<!-- <view class="line_1">我的团队</view> -->
			<view class="line_2">
				<view class="left">
					<view class="text1">{{info.stat.team_achievement}}</view>
					<view class="text2">团队业绩</view>
				</view>
				<view class="left">
					<view class="text1">{{info.stat.small_achievement}}</view>
					<view class="text2">小区业绩</view>
				</view>
				<view class="left">
					<view class="text1">{{info.stat.team_count}}</view>
					<view class="text2">团队人数</view>
				</view>
			</view>
		</view>

		<view class="black_3">
			<view class="line_1">
				我的业绩
			</view>
			<view class="line_3">
				<view class="text1">
					昵称/手机号
				</view>
				<view class="text2">
					团队等级
				</view>
				<view class="text3">
					消费金额
				</view>
			</view>
			<view class="line_2">
			 <template v-for="(item,index) in info.list">
					<view class="item">
						<view class="text1">
							{{item.mobile}}
						</view>
						<view class="text2">
							{{item.level == 0?'普通会员':'V'+item.level}}
						</view>
						<view class="text3">
							{{item.pay_money}}
						</view>
					 
					</view>
				</template>
			</view>
		</view>
		<rule ref="rule"></rule>
	</view>
</template>

<script>
	import rule from '@/components/rule/rule.vue'
	export default {
		components: {
			rule
		},
		data() {
			return {
				
				type: 0,
				page: 1,
				info: {
					"stat": {
						"nickname": "",
						"avatar": "",
						"level": 0,
						"self_achievement": "0",
						"invite_achievement": "0",
						"invite_count": 0,
						"team_count": 0,
						"team_achievement": "0",
						"team_count_achievement": "0",
						"small_achievement": "0"
					},
					"list": [
					]
				},
				userId: 0,
				levels: ["普通会员", "男爵车主", "子爵车主", "侯爵车主", "伯爵车主", "公爵车主", "皇爵车主", "国王车主"]
			};
		},
		onLoad(opt) {
			this.userId = opt.userId
			this.getinfo()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			onClickRight() {
				this.$refs.rule.open('team_rule')
			},
			select(index) {
				this.type = index
				this.list.length = 0
				this.page = 1
				this.getList()
			},
			getinfo() {
				this.api.http.requests('team/info', {}, res => {
					if (res.data) {
						this.info = res.data
					}
				}, "POST")
			},
			getList() {
				var data = {
					page: this.page,
					type: this.type == 0 ? 'direct' : 'team'
				}
				// this.api.http.requests('team/lists', data, res => {
				// 	if (res.data && res.data.length > 0) {
				// 		this.list = this.list.concat(res.data)
				// 	}
				// }, "POST")
			},
			copy(text) {
				this.custom.tool.setClipboardText("" + text, {

				}, {})
			}
		},
		onReachBottom() {
			this.page += 1
			this.getList()
		}
	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}

	.uni-navbar {
		.uni-navbar__content {
			border: 0 none !important;
		}

		.uni-nav-bar-right-text {
			font-size: 14px;
		}
	}
</style>
<style lang="less">
	page {
		background-color: #F5F5F5;
	}

	.header {
		padding: 10px 10px 20px 10px;
		background: #FE903D;
	}

	.black_1 {

		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #FFFFFF;
		border-radius: 8px 8px 8px 8px;
		border-radius: 5px;
		padding: 10px;

		.left {
			border-radius: 50%;
			width: 70px;
			height: 70px;
		}

		.middle {
			margin-left: 10px;
			flex: 1;
			font-size: 35rpx;
			font-weight: 800;
			color: #333333;

			.line_2 {
				color: #FE903D;

			}

			.line_3 {
				font-size: 21rpx;

				font-weight: 400;
				color: #666666;
			}
		}

		.right {
			text-align: center;
			margin-right: 10px;

			.img {
				width: 50px;
				height: 50px;
			}

			.text1 {
				
				margin-top: 5px;
				font-size: 16px;
				font-weight: bold;
				color: #333333;
			}
		}
	}

	.black_2 {
		margin: 10px;
		background: #FFFFFF;
		border-radius: 8px 8px 8px 8px;
		border-radius: 5px;
		padding-bottom: 20px;

		.line_1 {
			font-size: 16px;
			// font-weight: 800;
			color: #3A3A3A;
			padding: 10px;
			border-radius: 8px 8px 0px 0px;
			background: linear-gradient(to bottom, #D0ECD5, #F8FBF7);

			// background-color: #D0ECD5;
		}

		.line_2 {
			margin-top: 20px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			text-align: center;

			.left {
				flex: 1;
				font-size: 16px;
				font-weight: 400;
				color: #66A262;

				.text2 {
					margin-top: 5px;
					font-size: 12px;
					font-weight: 400;
					color: #414141;
				}
			}

		}

		.line {
			margin: 10px 0px;
			width: 100%;
			height: 1px;
			border-bottom: 1rpx solid #DFDFDF;
		}
	}

	.black_3 {
		margin: 10px;
		background: #FFFFFF;
		border-radius: 8px 8px 8px 8px;
		border-radius: 5px;

		display: block;

		.line_1 {
			display: flex;
			font-size: 16px;
			// font-weight: 800;
			color: #3A3A3A;
			padding: 10px;
			border-radius: 8px 8px 0px 0px;
			background: linear-gradient(to bottom, #D0ECD5, #F8FBF7);


		}
		.line_3{
			display: flex;
			justify-content: space-between;
			text-align: center;
			padding: 10px;
			color: #3A3A3A;
			font-size: 14px;
			.text1{
				flex: 2;
				text-align: start;
			}
				
			.text2{
				text-align: start;
				flex: 1;
			}
			.text3{
				text-align: end;
				flex: 1;
			}
		}

		.line_2 {
			margin-top: 10px;
			padding: 10px;
			color: #3A3A3A;
			font-size: 14px;
			.item {
				padding: 5px 0px 10px 0px;
				display: flex;
				justify-content: space-between;
				.text1{
					flex: 2;
					text-align: start;
				}
				.text2{
					text-align: start;
					flex: 1;
				}
				.text3{
					text-align: end;
					flex: 1;
				}
			}
		}
	}
</style>